{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
<turbo-frame id="bookmark-labels-{{ .ID }}" class="group block mb-4">
<form action="{{ urlFor(`/bookmarks`, .ID) }}" method="post"
 data-controller="turbo-form"
 data-turbo-form-action-value="{{ urlFor(`/api/bookmarks`, .ID) }}"
 data-turbo-form-method-value="patch">
  {{ yield csrfField() }}
  <input type="hidden" name="_to" value="{{ currentPath }}" />
  <button type="submit" class="hidden"></button>
  <div>
    {{- include "./labels" . -}}
    <div class="flex text-sm items-center mt-2 print:hidden">
      <div class="relative"
       data-controller="autocomplete"
       data-autocomplete-url-value="{{ urlFor(`/api/bookmarks/labels`) }}"
       data-autocomplete-item-class="p-2 whitespace-nowrap hf:bg-primary hf:text-white cursor-pointer"
       data-autocomplete-selected-class="bg-primary text-white">
        <input type="text" name="add_labels" placeholder="Add a new label"
         class="bg-transparent border-gray-300 border-b p-1 w-max"
         data-turbo-empty-submit-end="1"
         data-autocomplete-target="input" />
        <input type="hidden" name="label_id" data-autocomplete-target="hidden"/>
        <ul class="absolute z-50 border shadow bg-gray-50 min-w-full max-h-48 overflow-y-auto rounded"
         data-autocomplete-target="results">
        </ul>
      </div>
      <button type="submit"
       class="bg-gray-200 text-white text-sm p-1 ml-2 rounded
       border border-transparent hf:border-btn-primary-hover
       group-hfw:bg-btn-primary">Add label</button>
    </div>
  </div>
</form>
</turbo-frame>
